<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>要素查询</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #optionsDiv {
        background-color: dimgray;
        color: white;
        padding: 10px;
        width: 350px;
      }

      .esri-popup .esri-popup-header .esri-title {
        font-size: 18px;
        font-weight: bolder;
      }

      .esri-popup .esri-popup-body .esri-popup-content {
        font-size: 14px;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.29/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",        
        "esri/views/MapView",
        "esri/layers/GraphicsLayer",
        "esri/rest/query",
        "esri/rest/support/Query"
      ], function (Map, SceneView, MapView, GraphicsLayer, query, Query) {
        // URL to feature service containing points representing the 50
        // most prominent peaks in the U.S.
        const peaksUrl =
          "http://127.0.0.1:6080/arcgis/rest/services/sights/sights/FeatureServer/0";          

        // Define the popup content for each result
        const popupTemplate = {
          // autocasts as new PopupTemplate()
          title: "{name},{name_en}要素的属性信息",
          fieldInfos: [
            {
              fieldName: "name",
              label: "名称",
              format: {
                places: 0,
                digitSeperator: true
              }
            },
            {
              fieldName: "name_en",
              label: "名称（英文）",
              format: {
                places: 0,
                digitSeperator: true
              }
            },
            {
              fieldName: "province",
              label: "省份",
              format: {
                places: 0,
                digitSeperator: true
              }
            },
            {
              fieldName: "objectid",
              label: "objectid",
              format: {
                places: 0,
                digitSeperator: true
              }
            }            
          ],
          content:
            "<b><a href='https://www.jlu.edu.cn'>名称:</a>" +
            "</b> {name}" +
            "<br><b>英文名称Name:</b> {name_en}" +
            "<br><b>类型:</b> {type}" +
            "<br><b>面积:</b> {area_km2}" +
            "<br><b>所在区域:</b> {province}" +
            "<br><b><a href='https://gest.jlu.edu.cn'>描述:</a>" +
            "</b> {description}" + 
            "<br><b>照片:</b> <img src='{picture_path}' width='360' height='270' />" 
        }; 

        // Create graphics layer and symbol to use for displaying the results of query
        const resultsLayer = new GraphicsLayer({ title: "查询结果要素图层GraphicsLayer"});

        /******************************************************************
         * Set the query parameters to always return geometry and all fields.
         * Returning geometry allows us to display results on the map/view
         ******************************************************************/
        const params = new Query({
          returnGeometry: true,         
          outFields: ["*"]
        });

        const map = new Map({
          //basemap: "osm",
          basemap: "streets-navigation-vector",
          layers: [resultsLayer] // add graphics layer to the map
        });
       
        const view = new MapView({
            container: "viewDiv",
            //   map: webmap
            map: map,
            center:[115,35],
            zoom:4,
            //   popup:{
            //     autoOpenEnabled:false
            //   }
            popup: {
                dockEnabled: true,
                dockOptions: {
                    buttonEnabled: false,
                    breakpoint: false
                }
            }
        });

        // Call doQuery() each time the button is clicked
        view.when(() => {
          view.ui.add("optionsDiv", "bottom-right");
          document.getElementById("doBtn").addEventListener("click", doQuery);
        });

        const attributeName = document.getElementById("attSelect");
        //const expressionSign = document.getElementById("signSelect");
        //const value = document.getElementById("valSelect");
        const mywhere = document.getElementById("mywhere");

        // Executes each time the button is clicked
        function doQuery() {
          // Clear the results from a previous query and close the popup if its open.
          resultsLayer.removeAll();
          if (view.popup.visible) {
            view.closePopup();
          }
          /*********************************************
           *
           * Set the where clause for the query. This can be any valid SQL expression.
           * In this case the inputs from the three drop down menus are used to build
           * the query. For example, if "Elevation", "is greater than", and "10,000 ft"
           * are selected, then the following SQL where clause is built here:
           *
           * params.where = "ELEV_ft > 10000";
           *
           * ELEV_ft is the field name for Elevation and is assigned to the value of the
           * select option in the HTML below. Other operators such as AND, OR, LIKE, etc
           * may also be used here.
           *
           **********************************************/
          //params.where = attributeName.value + expressionSign.value + value.value;
          //params.where = mywhere.value;
          params.where = attributeName.value + '  like  ' + "'%" + mywhere.value + "%'" ;
          //console.log(params.where,123)          

          // executes the query and calls getResults() once the promise is resolved
          // promiseRejected() is called if the promise is rejected
          query.executeQueryJSON(peaksUrl, params).then(getResults).catch(promiseRejected);
        }

        // Called each time the promise is resolved
        function getResults(response) {
          // Loop through each of the results and assign a symbol and PopupTemplate
          // to each so they may be visualized on the map
          if (response.features && response.features.length > 0) {
            const peakResults = response.features.map((feature) => {
              // Sets the symbol of each resulting feature to a cone with a
              // fixed color and width. The height is based on the mountain's elevation
              feature.symbol = {
                type: "simple-fill", // autocasts as new SimpleFillSymbol()
                color: "#00FF00",
                style: "solid",
                outline: {
                    width: 1.2,
                    color: [255, 0, 0, 0.5]
                }

              };

              feature.popupTemplate = popupTemplate;
              return feature;
            });

            resultsLayer.addMany(peakResults);

            // animate to the results after they are added to the map
            view
              .goTo(peakResults)
              .then(() => {
                view.openPopup({
                  features: peakResults,
                  featureMenuOpen: true,
                  updateLocationEnabled: true
                });
              })
              .catch((error) => {
                if (error.name != "AbortError") {
                  console.error(error);
                }
              });
          }

          // print the number of results returned to the user
          document.getElementById("printResults").innerHTML = response.features.length + " 个 results 被找到";
        }

        // Called each time the promise is rejected
        function promiseRejected(error) {
          console.error("Promise rejected: ", error.message);
        }
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div class="esri-widget" id="optionsDiv">
      <h2>查询</h2>
      <!-- <input id="mywhere" name="mywhere" value="name2 like '%Qinghai%'" /> -->

      <select class="esri-widget" id="attSelect">
        <option value="name" selected>名称：</option>
        <option value="name_en">EnglishName：</option>
        <option value="province">所在省份：</option>
        <option value="description">具体描述：</option>
      </select>
      &nbsp;&nbsp;
      <input id="mywhere" name="mywhere" value="" />

      <!-- <select class="esri-widget" id="signSelect">
        <option value=">">is greater than</option>
        <option value="<">is less than</option>
        <option value="=">is equal to</option>
      </select>
      
      <select class="esri-widget" id="valSelect">
        <option value="1000">1,000 ft</option>
        <option value="5000">5,000 ft</option>
        <option value="10000">10,000 ft</option>
        <option value="15000">15,000 ft</option>
        <option value="20000">20,000 ft</option>
      </select> -->

      <br />
      <br />
      <button class="esri-widget" id="doBtn">点 击 查 询</button>
      <br />
      <p><span id="printResults"></span></p>
    </div>
  </body>
</html>